<template>
  <div class="products">
    <div class="info" v-for="item in 1">
      <div class="img_info">
        <p><img src="@/assets/image/imgs.png" alt=""></p>
        <span>新品</span>
      </div>
      <div class="products_info">
        <p>这里显示商品名称，最多显示1行</p>
        <p>这里显示商品描述，最多显示1行</p>
      </div>
      <div class="products_bottom">
        <p>￥99</p>
        <p><img src="@/assets/image/shopping_cart.png" alt=""></p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
name:'products-vue',
}
</script>

<style lang="scss" scoped>
.products{ 
  width: 100%;
  height: 100%;
  .info{ 
    padding: 0 16px;
    position: relative;
    .img_info >p:first-child {
      margin-bottom: 0px !important;
      img{ 
        margin-top: 10px;
        border-radius: 6px;
        width: 100%;
      }
    }
    .img_info>span{ 
      background-color: #07c160;
      color: #fff;
      border-radius: 0 12px 12px 0 ;
      font-size: 12px;
      padding: 1px 15px 1px 10px;
      position: absolute;
      top: 15px;
    }
    .products_info>p:first-child{ 
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 14px;
      color: #333;
      margin: 5px 0 5px;
    }
    .products_info>p:last-child{ 
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 12px;
      color: #999;
    }
    .products_bottom{ 
      display: flex;
      justify-content: space-between;
      align-items: center;
      line-height: inherit;
      p:first-child{ 
        color: #65c4aa;
        font-size: 16px;
      }
      p:last-child{ 
        width: 23px;
        img{
          width: 100%;
        }
      }
    }
  }
}

</style>